* {
  padding: 0;
  margin: 0;
  list-style: none;
}
body {
  background: #f4f4f4;
}
.head {
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 100vw;
  height: 20vw;
}
.head-top {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw;
  width: 100vw;
  height: 10vw;
  background: #ffffff;
}
.head-top span {
  font-size: 5vw;
}
.head-btm {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 5vw;
  width: 100vw;
  height: 10vw;
  border-top: 1px solid #dfdfdf;
  background: #ffffff;
}
.head-btm li {
  height: 100%;
  line-height: 10vw;
}
.head-btm img {
  height: 100%;
}
.body {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: auto;
  position: fixed;
  top: 20vw;
  width: 100vw;
  height: 200vw;
}
.body ul {
  width: 48.5vw;
  height: 70vw;
  background: white;
  font-size: 3.2vw;
}
::-webkit-scrollbar {
  display: none;
}
.ul-top {
  width: 100%;
  height: 70%;
  background-image: url(img/微信图片_20240806194728.jpg);
  background-size: 100%;
  transition: all 1s;
  border-radius: 50%;
}
.ul-top img {
  width: 100%;
}
.ul-top:hover {
  background-image: url(img/微信图片_20240806195026.jpg);
  transform: rotate(360deg);
  border-radius: 50%;
}
.ul-btm {
  width: 100%;
  height: 25%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 2vw;
  box-sizing: border-box;
  background-color: #ffffff;
}
.s2 {
  color: orange;
}
.s3 {
  color: #ccc;
}
.s3-1 {
  color: red;
  font-size: 4vw;
  vertical-align: middle;
}
